<template>
	<view>
		<!--首页第一部分-->
		<view class="part firstpage">
			<view>
				<image class="background" src="../../static/coach/background.png">	
			</view>
			<view>
				<view class="bannertitle" @click="demo2(2,4)">超级外教 Super Coach</view>
				<view class="bannerdesc" @click="demo2(2,5)">科技和人文，改变你的认知</view>
				<view class="sharestore" @click="goto('/pages/my/index')">分享店铺</view>
			</view>
		</view>
		
		<!--首页第二部分-->
		<view class="part">
			<u-grid class="secondpage" :border="false" :col="4">
				<u-grid-item v-for="(item,index) in tags" :key="index" 
					@click="clickOtherModul(item)">
					<image class="iconIMG" :src="item.icon" ></image>
					<text class="classType">{{item.tag}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- <view class="part secondpage">
		    <view class="iconClass" v-for="(item,index) in tags">
				<image class="iconIMG" :src="item.icon" @click="goto(item.url)">
		        <view class="classType">{{item.tag}}</view>
		    </view>
		</view> -->
		
		<!--首页第三部分-->
		<view class="part thirdpage">
		    暂无公告，欢迎来到本店铺进行课程预约,本店会员可以直接登录约课，非本店会员也可以登录绑定手...
		</view>
		
		<!--首页第四部分-->
		<view class="part">
		    <view class="page_title">机构介绍</view>
		    <view class="sentenceSET" v-for="(item,index) in words">
		        <view class="sentence">{{item.sentence}}</view>
		    </view>
		</view>
		
		<!--首页第五部分-->
		<view class="part fifthpage">
		    <view class="page_title ">老师团队<span class="fi1">8</span></view>
		    <view class="teachers">
				<view class="teacher" @tap="goToTeacherDetail(item)"  v-for="(item,index) in teachers">
					<image class="teacherIMG" :src="item.face"  @click="goto('/pages/index/schedule')">
					<view class="teacherNAME" >{{item.name}} {{item.id}}</view>
				</view>
				 
		    </view>
		</view>
		
		<!--首页第六部分-->
		<view class="part sixthpage">
		    <view class="six1">
		        <view class="page_title">照片墙<span class="titlemore">查看更多</span></view>
		    </view>
		    <view class="pointer">商家暂未上传照片，这是一些示例图片</view>
			<view class="scroll-view-container">
			    <scroll-view scroll-x="true" class="scroll-view">
			      <view class="img-item" v-for="(img, index) in imgList" :key="index">
			        <image :src="img" mode="aspectFit"></image>
			      </view>
			    </scroll-view>
			  </view>
		</view>
		
		<!--首页第七部分-->
		<view class="part">
		    <view class="page_title any">其他</view>
		    <view class="other">
		        <view>小程序</view>
		        <view>微信通知</view>
		    </view>
		</view>
		
		<!--首页第八部分-->
		<view class="part eighthpage">
		    <view class="page_title final">联系机构</view>
		    <view class="relate" v-for="(item,index) in message">
		        <view class="message">{{item.relate}}</view>
		    </view>
			
		</view>
		
		

			 
	</view>
</template>

<script>
	 
	export default {
		 
		data() {
			return {
				 a:"ddddddddd",
				 teachers:[],
				 tags:[],
				 words:[],
				 message:[],
				 b:"",
				 c:[],
				 d:{},
				 e:[{},{}],
				 imgList: [
					 '/static/coach/s1.png',
					 '/static/coach/s2.png',
				 ]
			};
		},
		watch: {
			 
		},
		onPageScroll(e) {
			 
		},
		onLoad(e) {
			 // when load first time .
			 this.demo1();
			 this.demo2(2,5);
			 this.loadTeachers();
			 this.ltags();
			 this.lwords();
			 this.lmessage();
		},
		//下拉刷新
		onPullDownRefresh() {
			 
		},
		//加载更多
		onReachBottom() {
			 
		},
		onHide() {
			//离开页面时关闭吸顶功能,用于处理h5环境运行下'bottom' of null报错的问题
			this.enable = false
		},
		onShow() {
		   //evey show time()
		   this.demo2(2,5);
		   
		},
		methods: {
			lmessage(){
				let rs=[
					{
						relate:"联系人: Anna老师",
					},
					{
						relate:"联系电话: 19033093959/13821247859",
					},
					{
						relate:"客服微信: 暂未设置",
					},
				];
				this.message = rs;
			},
			
			loadTeachers(){
				let rs = [
					 {
						 name:"chireen",
						 id:1,
						 face:"../../static/coach/f1.png",
					 },
					 {
						 name:"Sammy",
						 id:2,
						 face:"../../static/coach/f2.png",
					 },
					 {
						 name:"Premela T.",
						 id:3,
						 face:"../../static/coach/f3.png",
					 },
					 {
						 name:"Megan U.",
						 id:4,
						 face:"../../static/coach/f4.png",
					 },
					 {
						 name:"dezzi",
						 id:5,
						 face:"../../static/coach/f5.png",
					 },
					 {
						 name:"Jolene",
						 id:6,
						 face:"../../static/coach/f6.png",
					 },
					 {
						 name:"christie",
						 id:7,
						 face:"../../static/coach/f7.png"
					 },
					 {
						 name:"Lily",
						 id:8,
						 face:"../../static/coach/f8.png"
					 }
				 ];
				this.teachers = rs ;
			},
			demo1(){
				console.log(1111);
				this.a="ddddddddddeeeeeeeedd";
			}, 
			
			demo2(a ,c){
			//	alert(123);
			},
			demo3(a , b ,c ){
				
			},
			//href  vue not work .
			goto(url){
				console.log("加载页面:" , url )
				uni.navigateTo({
					url 
				});
			},
			goToTeacherDetail(e){
				console.log(e);
				let id = e.id ;
				let userlogin = true ; //
				if(!userlogin){
				 // go to login .	
				}
				let url = "/pages/index/teacherdetai?id=" + id ;
				this.goto(url);
			},
			ltags(){
				let rs=[
					{
						icon:"../../static/coach/icon1.png",
						tag:"1对1预约",
						url:"/pages/index/schedule",
					},
					{
						icon:"../../static/coach/icon2.png",
						tag:"团课预约",
						url:"/pages/index/schedule",
					},
					{
						icon:"../../static/coach/icon3.png",
						tag:"我的预约",
						url:"/pages/msg/Mydata",
					},
					{
						icon:"../../static/coach/icon4.png",
						tag:"我的会员卡",
						url:"/pages/msg/Mycard",
					},
				];
				this.tags = rs;
			},
			clickOtherModul(item){
				uni.navigateTo({
					url:item.url
				})
			},
			lwords(){
				let rs=[
					{
						sentence:"我们超级外教super coach有督导老师不定期进入会议室，督促老师认真上课。",
					},
					{
						sentence:"希望家长们带着孩子课前预习，课后复习，课堂和老师多互动，达成高效有趣的学习。",
					},
					{
						sentence:"power up体系3小时一个单元，共有九个单元，另外一般有三节复习课。",
					},
					{
						sentence:"大家对课程有任何疑问，可以随时加下方Anna微信联系。",
					},
				];
				this.words = rs;
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		background: #F2F2F7;
	}

	.goback {
		position: fixed;
		top: 80%;
		right: 30rpx;
	}

	.jobtitle {
		position: relative;

		.jobtitleBom {
			position: absolute;
			width: 30rpx;
			left: 50%;
			top: 80%;
			transform: translate(-50%, 0);

		}
	}

	.topbg-scroll {
		width: 100%;
		white-space: nowrap;
	}

	.activeQs {
		color: #1A1A1A !important;
		font-weight: 800;
	}

	.activeQ {
		color: #1A1A1A !important;
		font-size: 38rpx;
		font-weight: 800;
	}

	.active {
		font-size: 38rpx !important;
		font-weight: 800 !important;
	}

	.active2 {
		color: #1A1A1A !important;
		font-size: 38rpx !important;
		font-weight: 800 !important;
	}

	.active3 {
		color: #1A1A1A !important;
		font-size: 28rpx !important;
		font-weight: 800 !important;
	}

	.topbg {
		width: 100%;
		// height: 100rpx;
		background-color: #00DD9A;
		// position: fixed;
		// /* #ifdef MP-WEIXIN */
		// top: 0;
		// /* #endif */
		// /* #ifdef H5 */
		// top: 78rpx;
		// /* #endif */
		// /* #ifdef APP-PLUS */
		// top: 0;
		// /* #endif */
		// z-index: 998;
	}

	.topbg-type {
		width: 100%;
		height: 40rpx;
		// margin-top: 28rpx;
		padding-top: 28rpx;

		.topbg-type-box {
			width: 686rpx;
			height: 100%;
		}

		.topbg-type-box-l-i {
			font-size: 32rpx;
			color: #ffffff;
			margin-right: 40rpx;
		}
	}

	.topbg-yx {
		width: 100%;
		// height: 366rpx;
		background: linear-gradient(to bottom, #ffffff, #F2F2F7);
		border-radius: 40rpx 40rpx 0 0;
		margin-top: 30rpx;
		align-content: flex-start;

		.topbg-yx-box {
			width: 686rpx;
			height: 40rpx;
			margin-top: 35rpx;
		}

		.topbg-yx-box-l {
			width: 62%;



			.topbg-yx-box-l-i {
				display: inline-block;
				margin-right: 50rpx;
				color: #999999;
				font-size: 32rpx;
				font-weight: 500;

				.topbg-yx-box-l-i-c {
					z-index: 1 !important;

					// position: relative;
					.topbg-yx-box-l-i-text {
						z-index: 3 !important;
					}
				}

				.topbg-yx-box-l-i-line {
					margin-top: -10rpx;
					width: 100%;
					height: 10rpx;
					background: linear-gradient(90deg, #08F3CE 0%, #05F3A7 100%);
					border-radius: 7rpx;
					z-index: 2 !important;
				}
			}
		}

		.topbg-yx-box-r {
			text {
				color: #00B88F;
				font-size: 28rpx;
				font-weight: 500;
				margin-right: 20rpx;
			}
		}

		.topbg-sx-box {
			width: 686rpx;
			// height: 25rpx;
			margin-top: 30rpx;

			.topbg-sx-box-l-i {
				color: #999999;
				font-size: 28rpx;
				font-weight: 500;
				margin-right: 38rpx;
			}
		}
	}




	.gwList {
		width: 100%;
		// margin-top: 260rpx;

		.gwList-box {
			width: 686rpx;
			height: 100%;

			.gwList-box-item {
				width: 100%;
				// height: 329rpx;
				background-color: #ffffff;
				border-radius: 24rpx;
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
			}

			.gwList-box-item-box {
				width: 623rpx;
				height: 100%;

				.gwList-box-item-box-title {
					margin-top: 30rpx;

					text:nth-of-type(1) {
						color: #1F1F1F;
						font-size: 38rpx;
						font-weight: 800;
					}

					text:nth-of-type(2) {
						color: #00B88F;
						font-size: 38rpx;
						font-weight: bold;
					}
				}

				.gwList-box-item-box-label {
					margin-top: 30rpx;
				}

				.gwList-box-item-box-name {
					margin-top: 24rpx;
					color: #999999;
					font-size: 28rpx;
					font-weight: 500;
				}

				.gwList-box-item-box-line {
					width: 100%;
					border: 1rpx solid #E6E6E6;
					margin-top: 30rpx;
					margin-bottom: 20rpx;
				}

				.gwList-box-item-box-info {
					font-size: 26rpx;

					.gwList-box-item-box-info-l {
						color: #1A1A1A;

						.people {
							max-width: 110rpx;
							overflow: hidden; //超出的文本隐藏
							text-overflow: ellipsis; //溢出用省略号显示
							white-space: nowrap; // 默认不换行；
						}
					}

					.gwList-box-item-box-info-r {
						color: #999999;
						width: 50%;
						overflow: hidden; //超出的文本隐藏
						text-overflow: ellipsis; //溢出用省略号显示
						white-space: nowrap; // 默认不换行；
					}
				}
			}
		}
	}

	.banner {
		width: 100%;
		height: 250rpx;
		// margin-top: 20rpx;

		.banner-box {
			width: 686rpx;
			height: 100%;
			border-radius: 24rpx;
		}
	}

	.isfixed {
		border-radius: 0 !important;
	}

	.isfixeds {
		border-radius: 40rpx 40rpx 0 0;
	}

	.qySx {
		width: 100%;
		// height: 366rpx;
		background: linear-gradient(to bottom, #ffffff, #F2F2F7);
		padding-bottom: 40rpx;

		.qySx-box {
			width: 686rpx;
			height: 100%;

			.qySx-box-sxp {
				height: 60rpx;
				margin-top: 40rpx;
			}

			.qySx-box-l {
				height: 100%;
				width: 65%;

				// background-color: red;
				.qySx-box-l-i {
					display: inline-block;
					height: 100%;
					margin-right: 20rpx;
					color: #999999;
					font-size: 32rpx;
				}
			}

			.qySx-box-r {
				height: 100%;
			}

			.qySx-box-sxs {
				width: 100%;
				height: 30rpx;
				margin-top: 30rpx;

				.qySx-box-sxs-l {

					.qySx-box-sxs-l-i {
						margin-right: 40rpx;
						color: #999999;
						font-size: 28rpx;
					}
				}

				.qySx-box-sxs-r {
					color: #999999;
					font-size: 28rpx;
				}
			}
		}
	}

	.qyList {
		width: 100%;
		height: auto;

		.qyList-box {
			width: 686rpx;
			height: 100%;

			.qyList-box-item {
				width: 100%;
				// height: 400rpx;
				padding-bottom: 40rpx;
				background-color: #ffffff;
				border-radius: 24rpx;
				margin-bottom: 20rpx;

				.qyList-box-item-box {
					width: 626rpx;
					height: 100%;
				}

				.qyList-box-item-info {
					margin-top: 40rpx;
				}

				.qyList-box-item-job {
					width: 100%;
					color: #121212;
					font-size: 28rpx;
					font-weight: 500;
					margin-top: 20rpx;
				}

				.qyList-box-item-rem {
					color: #999999;
					font-size: 26rpx;
					margin-top: 20rpx;
				}
			}
		}
	}

	.announcement {
		// background: #ffffff;
		padding: 0px 0px 10px 10px;
		margin-top: 20rpx;
	}

	.announcementbox {
		width: 712upx;
		height: 64upx;
		background: #e5fff2;
		border-radius: 32upx;
		display: flex;
		align-items: center;
		padding: 0px 24upx;
	}

	.anount {
		color: #00DD9A;
		font-weight: bold;
	}

	.anounts {
		width: 80%;
		height: 60rpx;
		color: #333333;
		font-size: 24upx;
	}
	
	.part{
		background-color: #ffffff;
		margin: 20rpx 30rpx;
		border-radius: 10rpx;
	}
	
	.background{
		height: 350rpx;
		margin: 0rpx;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		width: 100%;
	}
	
	.firstpage{
		background-image: url(../../static/coach/first_left.png),url(../../static/coach/first_right.png);
		background-repeat: no-repeat,no-repeat;
		background-position: 3% 91%, 95% 85%;
		background-size: 100rpx,80rpx;
	}
	
	.bannertitle{
		border: 0rpx solid blue ;
		font-size: 40rpx;
		font-weight: 10rpx;
		width: 80%;
		margin: 3% 15% 0% 18%;
		font-weight: bold;
	}
	
	.bannerdesc{
	    border: solid 0rpx red;
	    font-size: 27rpx;
	    color: #aeaeae;
	    width: 60%;
	    margin: 1% 15% 3% 18%;
		padding-bottom: 5%;
	}
	
	.sharestore{
	    border: solid 0rpx red;
	    color: #aeaeae;
		float: right;
	    font-size: 20rpx;
		margin-top: -14%;
		margin-right: 5%;
	}
	
	/*.secondpage{
	    background-image: url(../../static/coach/icon1.png),url(../../static/coach/icon2.png),url(../../static/coach/icon3.png),url(../../static/coach/icon4.png);
	    background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
	    background-position: 5% 15%,35% 20%,65% 20%,95% 20%;
		background-size: 15%;
	}*/
	.iconClass{
		float: left;
		width: 25%;
	}
	
	.iconIMG{
		height: 120rpx;
		width: 120rpx;
	}
	
	
	
	.secondpage::after {
	   content: "";
	   display: table;
	   clear: both;
	 }
	 
	.classType{
		border: 0rpx red solid;
		font-size: 24rpx;
		padding-bottom: 8%;
		text-align: center;
	}
	
	.thirdpage{
	    background-image: url("../../static/coach/third1.png");
	    background-repeat: no-repeat;
	    background-position: 3% 50%;
		background-size: 10%;
		color: #aeaeae;
		font-size: 28rpx;
		padding: 20rpx 8rpx 20rpx 100rpx;
	}
	
	.page_title{
	    font-size: 33rpx;
	    padding-top: 2%;
	    padding-left: 3%;
	    font-weight: bold;
	}
	
	.sentenceSET{
		font-size: 28rpx;
		margin: 10rpx 20rpx 0rpx 40rpx;
		padding-top: 10rpx;
	}
	
	.sentence{
		padding-bottom: 10rpx;
	}
	
	.teacherIMG{
		width: 150rpx;
		height: 150rpx;
	}
	.teacherNAME{
		text-align: center;
	}
	
	.teacher{
		border: 0rpx solid red;
		margin: 0rpx 10rpx;
		float: left;
		position: 20%;
	}
	
	.fifthpage{
		padding-bottom: 400rpx;
	}
	
	.sixthpage{
		clear: both;
	}
	
	.titlemore{
		color: #aeaeae;
		float: right;
		font-size: 30rpx;
		margin-right: 20rpx;
		margin-top: 12rpx;
	}
	
	.pointer{
		color: #aeaeae;
		font-size: 30rpx;
		margin: 10rpx 20rpx;
	}
	
	.eighthpage{
		background-image: url(../../static/coach/eight1.png);
		background-repeat: no-repeat;
		background-position: 95% 10%;
	}
	.final{
		border: 0rpx solid red;
		border-left: 6rpx solid #09c05f;
		padding-left: 15rpx;
	}
	
	.message{
		margin-top: 8rpx;
		font-size: 30rpx;
		margin-left: 25rpx;
	}
	
	.scroll-view-container {
	  width: 300px;
	  height: 260px;
	  margin: 0 auto;
	  overflow: hidden;  
	}
	.scroll-view {
	  white-space: nowrap;  
	  width: auto;
	  height: 100%;
	}
	.img-item {
	  display: inline-block;
	  width: 200px;  
	  height: 100%;
	  margin-right: 10px;  
	}

	
	
	
	
</style>